<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../js/vue.js"></script>
<body>
    <div id="app">
        单向数据绑定：<input type="text" placeholder="" v-bind:value="str" ><br/><br/>
        双向数据绑定：<input type="text" placeholder="" v-model:value="str" ><br/><br/>

        <!-- <h1 v-model:href="str">{{title}}</h1> -->

        <input type="search" v-model:a="str"  b="222" c="333"><br/><br/>

        <!-- 简写形式 -->
        <input type="url" v-model="str" /><br/><br/>

        <textarea  id="" cols="60" rows="10" v-model="str"></textarea><br/><br/>
        


        <input type="radio" v-model=" gender" value="nan" name=" gender">男
        <input type="radio" v-model=" gender" value="nv" name=" gender">女<br/><br/>
        <h1>当前性别是：{{ gender}}</h1>

        <input type="checkbox" v-model="arr" value="狂飙">狂飙
        <input type="checkbox" v-model="arr" value="狂飙2">狂飙2
        <input type="checkbox" v-model="arr" value="狂飙3">狂飙3
        <h1>我喜欢的电视剧是：{{arr}}</h1><br/><br/><br/><br/>

        <select v-model="study">
            <option value="干饭">html</option>
            <option value="干米饭">css</option>
            <option value="干蛋炒饭">js</option>
            <option value="干炒饭">react</option>
            <option value="干大米饭">vue</option>
        </select>
        <h1>我喜欢的学科是：{{study}}</h1><br/><br/><br/><br/>
        
        
        

    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                str:'abcdefg',
                title:"学习指令",
                gender:"",
                arr:[],
                study:""
                
                
            }
        })
    </script>
</body>
</html>